<!DOCTYPE html>
<html  lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title>manage</title>
    <link rel="stylesheet" type="text/css" th:href="@{/public/css/assets/css/main.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/public/css/assets/css/color-dark.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/element/theme-chalk/index.css}">
    <style>
        .login-wrap {
            position: relative;
            width: 100%;
            height: 100%;
            background-image: url("[[@{/}]]/public/css/assets/img/login-bg.jpg");

            background-size: 100%;
        }
        .ms-title {
            width: 100%;
            line-height: 50px;
            text-align: center;
            font-size: 20px;
            color: #fff;
            border-bottom: 1px solid #ddd;
        }
        .ms-login {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 350px;
            margin: -190px 0 0 -175px;
            border-radius: 5px;
            background: rgba(255, 255, 255, 0.3);
            overflow: hidden;
        }
        .ms-content {
            padding: 30px 30px;
        }
        .login-btn {
            text-align: center;
        }
        .login-btn button {
            width: 100%;
            height: 36px;
            margin-bottom: 10px;
        }
        .login-tips {
            font-size: 12px;
            line-height: 30px;
            color: #fff;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="login-wrap">
        <div class="ms-login">
            <div class="ms-title">后台管理系统</div>
            <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content"
                     th:action="@{/login}">
                <el-form-item prop="username">
                    <el-input v-model="param.username" placeholder="username" name="username" @focus="hiddenMsg($event)">
                        <el-button slot="prepend" icon="el-icon-user"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                            type="password"
                            placeholder="password"
                            v-model="param.password"
                            name = "password"
                            @focus="hiddenMsg"
                            @keyup.enter.native="submitForm()"
                    >
                        <el-button slot="prepend" icon="el-icon-unlock"></el-button>
                    </el-input>
                </el-form-item>
                <div class="login-btn">
                    <el-button type="primary" native-type="submit" @click="submitForm($event)">登录</el-button>
                </div>
                <p class="login-tips">Tips : 用户名和密码随便填。</p>
                <span v-if="show" th:text="${msg}" style="color: red;"></span>
            </el-form>
        </div>
    </div>
</div>
<script th:src="@{/plugins/vue.min.js}" type="text/javascript"></script>
<script th:src="@{/plugins/element/js/index.js}" type="text/javascript"></script>
<script th:src="@{/plugins/axios/axios.min.js}" type="text/javascript"></script>
<script th:inline="javascript">
    var context = [[@{/}]];
</script>
<script th:inline="javascript">
    var msg = [[${msg}]];
</script>
<script>
    if(window!=top){
        top.location.href = location.href
    }
    new Vue({
        el: '#app',
        data: function() {
            return {
                param: {
                    username: '',
                    password: '',
                },
                rules: {
                    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                },
                show: false
            };
        },
        methods: {
            submitForm(e) {
                console.log(this.param);
                //e.preventDefault();
                this.$refs.login.validate((valid) => {
                    if (valid) {
                        console.log('submit!');
                    } else {
                        console.log('error submit!!');
                        e.preventDefault();
                    }
                });
            },
            hiddenMsg(e){
                this.show = false;
            }
        },
        created() {
            if(msg!=null){
                this.show = true;
            }
        }
    })
</script>
</body>
</html>